import React from 'react';
import { Form, DatePicker, Select } from '@teamix/ui';
import { ButtonIcon, YunxiaoIcon } from '@alife/devops-ui';
import dayjs from 'dayjs';
import MemberTrigger from 'components/memberTrigger';
import Popup from 'components/popup';
import intl from '../../../../../../../../../locale';

const { RangePicker } = DatePicker;
const formItemLayout = {
  labelCol: {
    span: 6,
  },

  wrapperCol: {
    fixedSpan: 12,
  },
};

const issuelevelList = [
  { value: 'Blocker', label: 'Blocker' },
  { value: 'Critical', label: 'Critical' },
  { value: 'Major', label: 'Major' },
];

export default class FilterForm extends React.Component {
  updateTableParams = (obj) => {
    const tableParams = { ...this.props.tableParams, ...obj };
    this.props.updateTableParams(tableParams);
  };

  onResetClick = () => {
    this.props.updateTableParams({
      start_time: null,
      end_time: null,
      users: [],
      issue_level_list: [],
    });

    this.props.updateData({
      end_time: null,
      start_time: null,
    });
  };

  render() {
    const { tableParams, start_time, end_time } = this.props;
    return (
      <Popup
        size="large"
        trigger={
          <ButtonIcon
            name="filter-line"
            style={{
              marginRight: 10,
              marginLeft: 10,
              marginBottom: 2,
            }}
          />
        }
        triggerType="click"
        footer={
          <Form.Item style={{ marginBottom: 0 }}>
            <Form.Reset
              text
              type="primary"
              style={{ border: 0 }}
              onClick={this.onResetClick}
              toDefault
            >
              <YunxiaoIcon type="delete-line" />
              {intl.get({
                id: 'code-assets.pinpoint.containers.filter.ClearAllFilterConditions',
                defaultMessage: '清除所有筛选条件',
              })}
            </Form.Reset>
          </Form.Item>
        }
      >
        <Form {...formItemLayout} labelTextAlign="left">
          <Form.Item
            label={intl.get({
              id: 'code-assets.pinpoint.containers.filter.Introduced',
              defaultMessage: '引入人',
            })}
          >
            <div
              ref={(o) => {
                this.opcontainer = o;
              }}
            >
              <MemberTrigger
                onChange={(users) => {
                  this.updateTableParams({ users });
                }}
                value={tableParams.users}
                container={() => this.opcontainer}
                multiple
              />
            </div>
          </Form.Item>
          <Form.Item
            label={intl.get({
              id: 'code-assets.pinpoint.containers.filter.ImportTime',
              defaultMessage: '引入时间',
            })}
          >
            <RangePicker
              followTrigger
              popupAlign="tr tr"
              value={[start_time, end_time]}
              onChange={(value) => {
                this.props.updateData({
                  start_time: value[0],
                  end_time: value[1],
                });
              }}
              onOk={(value) => {
                this.updateTableParams({
                  start_time: dayjs(value[0]).format('YYYY-MM-DD'),
                  end_time: dayjs(value[1]).format('YYYY-MM-DD'),
                });
              }}
            />
          </Form.Item>
          <Form.Item
            label={intl.get({
              id: 'code-assets.pinpoint.containers.filter.ProblemLevel',
              defaultMessage: '问题等级',
            })}
          >
            <Select
              mode="multiple"
              followTrigger
              dataSource={issuelevelList}
              value={tableParams.issue_level_list}
              onChange={(value) => {
                this.updateTableParams({
                  issue_level_list: value,
                });
              }}
            />
          </Form.Item>
        </Form>
      </Popup>
    );
  }
}
